<script setup>
import { ref } from 'vue';

import {
  ElButton,
  ElDialog,
  ElDropdown,
  ElDropdownItem,
  ElDropdownMenu,
  ElInput,
  ElText,
  ElTree,
} from 'element-plus';
import { v4 as uuidv4 } from 'uuid';

import { usePlottingMapStore } from '#/store/modules/mapStore';
import {
  deleteNode,
  setLayerVisibility,
  setVisibility,
} from '#/utils/plotting-utils';

const mapStore = usePlottingMapStore();

const checkedKeys = ref([]);

// 图层添加相关状态
const layerModalVisible = ref(false);
const layerForm = ref({
  name: '',
  sceneId: '',
});

function onSceneMenuClick(key, id) {
  if (key === '1') {
    // 打开添加图层对话框
    layerForm.value = {
      name: '',
      sceneId: id,
    };
    layerModalVisible.value = true;
  }
}

function onLayerMenuClick(key, id) {
  if (key === '1') {
    // 设置为当前标绘图层
    mapStore.activeLayer = id;
  } else {
    setLayerVisibility(id, false);
  }
}

// 处理添加图层
function handleAddLayer() {
  if (!layerForm.value.name.trim()) {
    return;
  }
  const layerId = uuidv4();
  document.plotting.newLayer(layerId, layerForm.value.name);
  layerModalVisible.value = false;
}

function onNodeClick(key, id) {
  if (key === '1') {
    deleteNode(id);
  } else if (key === '2') {
    setVisibility(id, false, true);
  }
}

function onItemClick(key, type, id) {
  if (type === 'scene') {
    onSceneMenuClick(key, id);
  } else if (type === 'layer') {
    onLayerMenuClick(key, id);
  } else {
    onNodeClick(key, id);
  }
}
</script>
<template>
  <div class="scene-manager">
    <div class="func-panel scene-management scrollbar">
      <ElTree
        v-if="mapStore.sceneTree.length > 0"
        :data="mapStore.sceneTree"
        v-model:current-node-key="mapStore.selectedNode"
        show-checkbox
        node-key="id"
        default-expand-all
        :props="{ label: 'label', children: 'children' }"
        v-model:default-checked-keys="checkedKeys"
      >
        <template #default="{ data }">
          <ElDropdown
            trigger="contextmenu"
            @command="(key) => onItemClick(key, data.type, data.id)"
          >
            <span>{{ data.label }}</span>
            <template #dropdown>
              <ElDropdownMenu v-if="data.type === 'scene'">
                <ElDropdownItem command="1">添加图层</ElDropdownItem>
              </ElDropdownMenu>
              <ElDropdownMenu v-else-if="data.type === 'layer'">
                <ElDropdownItem command="1">设为当前标绘图层</ElDropdownItem>
                <ElDropdownItem command="2">隐藏当前标绘图层</ElDropdownItem>
              </ElDropdownMenu>
              <ElDropdownMenu v-else-if="data.type === 'node'">
                <ElDropdownItem command="1">删除节点</ElDropdownItem>
                <ElDropdownItem command="2">可见性设置</ElDropdownItem>
              </ElDropdownMenu>
            </template>
          </ElDropdown>
        </template>
      </ElTree>
    </div>
  </div>

  <ElDialog v-model="layerModalVisible" title="添加图层" width="500">
    <span>
      <div class="flex gap-3">
        <ElText tag="b" size="large">图层名称</ElText>
        <ElInput
          v-model="layerForm.name"
          style="width: 240px"
          placeholder="请输入"
        />
      </div>
    </span>
    <template #footer>
      <div class="dialog-footer">
        <ElButton @click="layerModalVisible = false">取消</ElButton>
        <ElButton type="primary" @click="handleAddLayer"> 确认 </ElButton>
      </div>
    </template>
  </ElDialog>
</template>

<style scoped>
.scene-manager {
  box-sizing: border-box;
  width: 100%;
  padding: 1.5vh 0.7vw;

  .func-panel {
    box-sizing: border-box;
    width: 100%;
    padding: 1vh 0.5vw;
    overflow: auto;
    background: #fff;
    border-radius: 5px;
  }

  .symbol-lib {
    height: 30vh;
    margin-top: 1.5vh;
  }

  .scene-management {
    height: 45vh;
    margin-top: 0.5vh;
  }
}

.scrollbar {
  overflow: auto;
}

.scrollbar::-webkit-scrollbar {
  width: 5px;
}

.scrollbar::-webkit-scrollbar-thumb {
  background-color: #ccc;
  border-radius: 10px;
}

.scrollbar::-webkit-scrollbar-track {
  background-color: #f1f1f1;
  border-radius: 10px;
}
</style>
